<template>
	<view class="me-main">
		<view class="scroll-wrapper">
			<view class="header-bg"></view>
			<view class="scroll-content">
				<view class="status_bar"></view>
				<view class="header">
					<view class="user-info-wrap" @click="jumpUserInfoAction">
						<view class="left">
							<image class="user-avatar" :src="userInfo.avatarUrl" v-if="userInfo.avatarUrl"></image>
							<text class="iconfont user-avatar-icon" v-else>&#xe639;</text>
						</view>
						<view class="center">
							<text class="user-name">{{userInfo.nickName || '点击登录'}}</text>
							<view class="tips">勤能补拙，黄雀在后～♡</view>
						</view>
						<text class="iconfont right">&#xe60a;</text>
					</view>
					<view class="money-info-wrap">
						<view class="money-info-column">
							<view class="count">12</view>
							<view class="text">余额</view>
						</view>
						<view class="money-info-column">
							<view class="count">36</view>
							<view class="text">优惠券</view>
						</view>
						<view class="money-info-column">
							<view class="count">99</view>
							<view class="text">积分</view>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="box">
						<view class="top">
							<view class="title">我的订单</view>
							<view class="more" @click="jumpOrderList(-1)">查看全部</view>
							<text class="iconfont arrow-right-icon">&#xe60a;</text>
						</view>
						<view class="bottom">
							<view class="item" v-for="(item,index) in orderTabsList" :key="index" @click="jumpOrderList(index)">
								<text class="iconfont" v-html="item.icon"></text>
								<view class="text">{{item.text}}</view>
							</view>
						</view>
					</view>
					<view class="box history-box">
						<view class="top">
							<text class="iconfont clock-icon">&#xe647;</text>
							<view class="title">浏览历史</view>
							<text class="iconfont delete-icon">&#xe604;</text>
						</view>
						<view class="bottom">
							<scroll-view scroll-x="true">
								<image class="history-img" v-for="(item,index) in 6" :key="index" src="https://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/170941/7/6788/305267/602b7423E7f236f1c/6fe86d12af61b421.jpg!q70.dpg.webp"></image>
							</scroll-view>
						</view>
						<view class="cell-wrap">
							<view class="cell b-b" @click="clickCellAction('wallet')">
								<text class="iconfont cell-icon wallet-icon">&#xe686;</text>
								<text class="label">我的钱包</text>
								<text class="iconfont arrow-right-icon">&#xe60a;</text>
							</view>
							<view class="cell b-b" @click="clickCellAction('address')">
								<text class="iconfont cell-icon address-icon">&#xe60c;</text>
								<text class="label">地址管理</text>
								<text class="iconfont arrow-right-icon">&#xe60a;</text>
							</view>
							<view class="cell b-b" @click="clickCellAction('collection')">
								<text class="iconfont cell-icon collection-icon">&#xe66a;</text>
								<text class="label">我的收藏</text>
								<text class="iconfont arrow-right-icon">&#xe60a;</text>
							</view>
							<view class="cell b-b" @click="clickCellAction('feedback')">
								<text class="iconfont cell-icon opinion-icon">&#xe7c4;</text>
								<text class="label">意见反馈</text>
								<text class="iconfont arrow-right-icon">&#xe60a;</text>
							</view>
							<view class="cell" @click="clickCellAction('setting')">
								<text class="iconfont cell-icon setting-icon">&#xe611;</text>
								<text class="label">设置</text>
								<text class="iconfont arrow-right-icon">&#xe60a;</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
    import Vue from 'vue';
	import util from '@/static/js/util';
	import { mapState } from 'vuex';
	export default Vue.extend({
		data() {
			return {
				orderTabsList:  [{
					text: '待付款',
					icon: '&#xe626;'
				},{
					text: '待发货',
					icon: '&#xe63f;'
				},{
					text: '待收货',
					icon: '&#xe690;'
				},{
					text: '待评价',
					icon: '&#xe630;'
				}]
			}
		},
		computed: {
			...mapState({
				userInfo: (state:any) => state.login.userInfo 
			})
		},
		onLoad() {
			uni.setNavigationBarTitle({title:''})
			// console.log('======',uniCloud)
		},
		methods: {
			jumpUserInfoAction() {
				let url = '/pages/login/login'
				if(!!this.userInfo.nickName) {
					url = '/pages/userInfo/userInfo'
				}
				util.jumpPage(url)
			},
			jumpOrderList(index:any) {
				let tabsIndex = index+1
				let url = `/pages/orderList/orderList?tabsIndex=${tabsIndex}`
				util.jumpPage(url)
			},
			clickCellAction(key: any) {
				let urlKey:any = {
					wallet: '/pages/wallet/wallet',
					address: '/pages/addressList/addressList',
					collection:'/pages/collection/collection',
					feedback: '/pages/feedback/feedback',
					setting: '/pages/setting/setting',
					orderList: '/pages/orderList/orderList',
				}
				util.jumpPage(urlKey[key])
			}
		}
	});
</script>

<style lang="scss">
	@import "./me.scss";  
</style>